<template>
  <div class="sysMenu">
    <el-menu 
      class="custom_menu" 
      ref="menus"
      background-color="#1F244B"
      text-color="#ffffff"
      active-text-color="#ffffff"
      :collapse="collapse" 
      :default-openeds="defaultOpeneds"
      :default-active="defaultActive">
      <template v-for="item in menuList" :key="item.defaultMenuId">
        <el-menu-item v-if="!item.childList.length" :key="item.defaultMenuId" :index="item.defaultMenuId" :id="item.defaultMenuId" @click="doSkip(item.router, item.defaultMenuId, item.name)">
          <i :class="'icon zcytIcon zcyt-' + item.icon" class="menu_icon"></i>
          <span>{{item.name}}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="item.defaultMenuId">
          <template #title>
            <i :class="'icon zcytIcon zcyt-' +item.icon" class="menu_icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item v-for="itemC in item.childList" :key="itemC.defaultMenuId" :index="itemC.defaultMenuId" :id="itemC.defaultMenuId" @click="doSkip(itemC.router, itemC.defaultMenuId, itemC.name)">
            {{itemC.name}}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { getSysMenusApi } from '@/api/api'
import { arrTreeToArr } from '@/utils/utils'
export default {
  name: 'sysMenu',
  data() {
    return {
      collapse: false,
      menuList: []
    }
  },
  computed: {
    defaultOpeneds() {
      return this.$store.state.menuState.defaultOpeneds
    },
    defaultActive() {
      return this.$store.state.menuState.defaultActive
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化菜单，先判断缓存中是否有，没有就请求
    init() {
      const currentPath = this.$route.path // 获取当前路由
      if(currentPath === '/index') { // 登录进入系统执行
        getSysMenusApi().then(res => {
          if(res.code === '200') {
            this.menuList = res.data
            window.sessionStorage.setItem('menuCache', JSON.stringify(res.data))
            this.setRouterInfo(currentPath)
          }
        })
      } else { // 刷新系统执行
        const menuCache = window.sessionStorage.getItem('menuCache')
        this.menuList = JSON.parse(menuCache)
        this.setRouterInfo(currentPath)
      }
    },

    // 设置路由信息
    setRouterInfo(currentPath) {
      const menus = arrTreeToArr(this.menuList, 'childList') // 将树形对象数组转为一维扁平对象数组
      menus.forEach(item => {
        // 通过登录进入系统时候添加路由信息
        if(item.router && item.url && currentPath === '/index') {
          // 设置动态路由
          this.$router.addRoute('index', {
            path: `/${item.router}`,
            name: item.router,
            component: this.$compList[`/src/views/${item.url}.vue`]
          })
        }
        // 设置首页信息
        if(item.name === '首页') {
          this.$emit('setHomeInfo', {id: item.defaultMenuId, name: item.name, path: item.router})
        }
        if(item.name === '首页' && currentPath === '/index') { // 从登录进入系统，直接跳转到首页
          this.doSkip(item.router, item.defaultMenuId, item.name)
        } else if(currentPath === `/${item.router}`) { // 刷新时候进入当前打开的路由页面
          this.doSkip(item.router, item.defaultMenuId, item.name)
        }
      })
    },

    doSkip(path, id, name) {
      if(path) {
        this.$emit('setTab', {id: id, name: name, path: path})
      }
    }
  }
}
</script>

<style lang="less" scoped>
.sysMenu{
  .custom_menu:not(.el-menu--collapse) {
    width: 200px;
  }
  .custom_menu.el-menu{
    border-right: none;
    .el-sub-menu.is-active{
      //设置一级菜单未展开子菜单时候，一级菜单的样式
      :deep(.el-sub-menu__title){
        background: #F93E3E !important;
      }
    }
    //设置一级菜单展开子菜单时候，一级菜单的样式
    .el-sub-menu.is-active.is-opened{
      :deep(.el-sub-menu__title){
        background: transparent !important;
      }
    }
    //设置菜单选中时候样式，没有子菜单情况下
    .el-menu-item.is-active{
      background: #F93E3E !important;
    }
  }
  //设置菜单收缩时候，鼠标放在一级菜单上展开子菜单时候，一级菜单的样式
  .custom_menu.el-menu.el-menu--collapse{
    .el-sub-menu.is-active.is-opened{
      :deep(.el-sub-menu__title){
        background: #F93E3E !important;
      }
    }
  }
  .menu_icon{
    margin: -2px 5px 0 0;
    font-size: 18px;
  }
}
</style>